
<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标签位置</div>
      <div class="w-3/4">
        <el-radio-group v-model="lowCode.globalConfig.labelPosition">
          <el-radio-button label="left">left</el-radio-button>
          <el-radio-button label="top">top</el-radio-button>
          <el-radio-button label="right">right</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标签宽度</div>
      <div class="w-3/4">
        <el-input-number
          v-model.number="lowCode.globalConfig.labelWidth"
          :min="1"
          :max="200"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">尺寸控制</div>
      <div class="w-3/4">
        <el-radio-group v-model="lowCode.globalConfig.size">
          <el-radio-button label="large">large</el-radio-button>
          <el-radio-button label="default">default</el-radio-button>
          <el-radio-button label="small">small</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">弹框配置</div>
      <div class="w-3/4">
        <el-button
          type="primary"
          @click="selectDialog"
        >编辑</el-button>
      </div>
    </div>

    <!-- 选择编辑弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      v-model="dialogVisible"
      width="50%"
      append-to-body
      destroy-on-close
      title="弹框编辑"
    >
      <el-table :data="dialogCollection" stripe style="width: 100%">
        <el-table-column prop="title" label="弹框标题" />
        <el-table-column prop="alias" label="弹框别名" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="dialogEditor(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="你确认要删除这个?"
              @confirm="dialogRemove(scope.row)"
            >
              <template #reference>
                <el-button link type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, inject, computed, toRefs, reactive } from "vue";
import { LowCodeImp } from "@/components/low-code/core/type";
import {
  updateLowCode,
  lowCode,
  Component,
} from "@/components/low-code/core/index";

export default defineComponent({
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;

    const dialogVisible = ref(false);
    const dialogCollection = computed(() => {
      let list: any[] = [];
      Object.values(lowCode.dataCenter).map((dialog) => {
        if ((<Component>dialog).type == "dialog") {
          list.push({
            title: (<Component>dialog).options.title,
            alias: (<Component>dialog).options.alias,
            key: (<Component>dialog).key,
          });
        }
      });
      return list;
    });
    const selectDialog = () => {
      Object.values(lowCode.dataCenter).map((dialog) => {
        (<Component>dialog).options.visible = false;
      });
      dialogVisible.value = true;
    };
    const dialogEditor = (row: any) => {
      let com = lowCode.dataCenter[row.key] as Component;
      dialogVisible.value = false;
      com.options.visible = true;
      lowCode.setcurrentKey(com.key);
    };
    const dialogRemove = (row: any) => {
      let index = lowCode.domTree.items.findIndex(
        (com: { key: any }) => com.key == row.key
      );
      lowCode.domTree.items.splice(index, 1);
      lowCode.removeComponent(row.key);
    };

    return {
      lowCode,
      dialogVisible,
      dialogCollection,
      selectDialog,
      dialogEditor,
      dialogRemove,
    };
  },
});
</script>

<style  scoped>
</style>
